#region show
<template>
  <q-form :model="ruleForm" :rules="rules">
    <q-form-item label="账号" prop="account">
      <q-input v-model="ruleForm.account" placeholder="请输入账号" clearable />
    </q-form-item>
    <q-form-item label="密码" prop="password">
      <q-input
        v-model="ruleForm.password"
        placeholder="请输入密码"
        show-password
      ></q-input>
    </q-form-item>
  </q-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

interface RuleForm {
  account: string
  password: string
}

const ruleForm = reactive<RuleForm>({
  account: '广东吴彦祖',
  password: ''
})

const rules = reactive({
  account: [
    { required: true, message: '请输入账户名', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ]
})
</script>
#endregion show
